<template>
	<view class="safedetailcontent">
		<tn-form class="tn-padding-right-sm tn-padding-left-sm tn-padding-bottom" :model="detailInfo" ref="form" :borderBottom="false" :labelWidth="200" labelAlign="right" :errorType="['message']">
		    <tn-form-item label="风险位置" prop="name" :labelStyle="{color:'#777777'}">
		      <text>{{detailInfo.classRoomName}}</text>
		    </tn-form-item>
		    <tn-form-item label="责任人" prop="intro":labelStyle="{color:'#777777'}">
		      <text>{{detailInfo.responsiblePersonStr}}</text>
		    </tn-form-item>
		    <tn-form-item label="风险编号" prop="sex":labelStyle="{color:'#777777'}">
			  <text>{{detailInfo.riskNumber}}</text>
		    </tn-form-item>
		    <tn-form-item label="风险源名称" prop="sex" :labelStyle="{color:'#777777'}">
			  <text>{{detailInfo.riskSourceName}}</text>
		    </tn-form-item>
		    <tn-form-item label="风险因素" prop="sex" :labelStyle="{color:'#777777'}">
			  <text>{{detailInfo.riskFactors}}</text>
		    </tn-form-item>
		    <tn-form-item label="风险类别" prop="sex" :labelStyle="{color:'#777777'}">
			  <text>{{detailInfo.riskCategory}}</text>
		    </tn-form-item>
		    <tn-form-item label="风险等级" prop="sex" :labelStyle="{color:'#777777'}">
			  <text>{{detailInfo.riskLevelStr}}</text>
		    </tn-form-item>
		    <tn-form-item label="可能导致的事故及后果" prop="sex" labelPosition="top" :labelStyle="{color:'#777777', paddingLeft: '40rpx'}">
			  <text  :style="{paddingLeft: '30rpx'}">{{detailInfo.possibleAccidents}}</text>
		    </tn-form-item>
		    <tn-form-item label="风险现场照片" prop="sex" :required="true" labelPosition="top" :labelStyle="{color:'#777777', paddingLeft: '40rpx'}">
				<view class="imgs-content-view tn-padding-left-sm">
					<view v-for="(item,index) in filePathList" :key="index" class="tn-image-upload__item">
						<image class="tn-image-upload__item__image" :src="item.src" mode="aspectFill" @click="showImage(item)"></image>
						<!-- <text class="tn-icon-close" @click="deletePhoto(item, index)"></text> -->
					</view>
				</view>
		    </tn-form-item>
		    <tn-form-item label="管控依据" prop="sex" labelPosition="top" :labelStyle="{color:'#777777', paddingLeft: '40rpx'}">
			  <text :style="{paddingLeft: '30rpx'}">{{detailInfo.controlBasis}}</text>
		    </tn-form-item>
		</tn-form>
		<view class="botm-view tn-width-full tn-flex tn-flex-row-between">
			
			<tn-button class="bottom-btn" backgroundColor="#01BEFF" fontColor="tn-color-white" @click="goInput">修改</tn-button>
			<tn-button class="bottom-btn" backgroundColor="#01BEFF" fontColor="tn-color-white" @click="gorecord">历史记录</tn-button>
		</view>
		<tn-action-sheet :list="actionSheetList" v-model="show" @click="actionSheetCallback"></tn-action-sheet>
		<view v-if="previewImg" class="image-check-view tn-flex tn-flex-col-center" @click="previewImg=''">
			<image class="tn-width-full" :src="previewImg" mode="widthFix"></image>
			<text class="tn-icon-close" @click="previewImg=''"></text>
		</view>
		<tn-toast
		  ref="toast"
		></tn-toast>
	</view>
</template>

<script>
	export default{
		name: 'safelist',
		data(){
				return {
					
					detailInfo: {
						
					},
					actionSheetList: [
						{text: '低风险'},
						{text: '一般风险'},
						{text: '较大风险'},
						{text: '严重风险'},
					],
					show: false,
					fileList: [],
					filePathList: [],
					previewImg: '',
					imageTitle: '',
					detailId: ''
				}
		},
		onLoad:function(options){
			console.log(options.id);   // 2
			this.detailId = options.id
			this.getDetail();
		},
		onShow() {
			console.log('onshow------------------')
			this.imageTitle = this.config.apiUri + '/sysFileInfo/previewImg?id=';
			this.getDetail();
		},
		mounted() {
			this.imageTitle = this.config.apiUri + '/sysFileInfo/previewImg?id=';
				
		},
		methods: {
			showImage(item){
				console.log(item)
				this.previewImg = item.src;
			},
			actionSheetCallback(index) {
				this.detailInfo.leclevel = this.actionSheetList[index].text;
			},
			getDetail(){
				if(!this.detailId){
					return
				}
				this.request({
					url: '/InspectionRecord/Datail',
					method: 'get',
					params: {
						inspectionId: this.detailId
					},
				}).then(res => {
					if(res.code == 200){
						if(res.data.imageList){
						this.filePathList = []
							res.data.imageList.forEach(item => {
								item['src'] = this.imageTitle + item.id;
								this.filePathList.push(item)
							})
						}
						this.detailInfo = res.data
						
					}
				})
			},
			getLocalImg(){
					if(this.fileList.length >= 9){
						return;
					}
					wx.chooseImage({
					   success: chooseResult => {
							chooseResult.tempFiles.forEach((item, index) => {
								if(this.fileList.length < 9){
									this.fileList.push(item)
									this.filePathList.push(chooseResult.tempFilePaths[index])
								}
							})
						}
					})
			},
			deletePhoto(item, index){
				this.fileList.splice(index, 1)
				this.filePathList.splice(index, 1)
			},
			gorecord(){
				uni.navigateTo({
					url: '/pagesA/yuanwuduan/safeList?id='+this.detailInfo.gardenHouseClassRoomId
				})
			},
			goInput(){
				
				uni.navigateTo({
					url:'/pagesA/yuanwuduan/safeInput?id='+this.detailInfo.gardenHouseClassRoomId+'&detailId='+this.detailId
				})
			},
		},
	}
</script>

<style lang="scss">
	.safedetailcontent{
		color: #555555;
		min-height: 100vh;
		background-color: rgba(245, 245, 245, 1);
		overflow-y: auto;
	}
	.mingc-inp{
		background-color: #ffffff;
		padding-left: 10rpx;
	}
	.imgs-content-view{
		  overflow: hidden;
	}
	  .tn-image-upload__item {
	    width: 100%;
	    height: 180rpx;
	    border-radius: 30rpx;
	    margin-bottom: 20rpx;
			  float: left;
	    &__image {
	      width: 100%;
	      height: 180rpx;
	      border-radius: 30rpx;
	    }
	  }
	  .tn-image-upload__item {
		    width: 160rpx;
		    height: 160rpx;
		    border-radius: 30rpx;
		    margin-bottom: 20rpx;
			margin-right: 20rpx;
			position: relative;
		    &__image {
		      width: 100%;
		      height: 100%;
		      border-radius: 30rpx;
		    }
			  .tn-icon-close{
				  position: absolute;
				  top: 10rpx;
				  right: 10rpx;
				  font-size: 40rpx;
			  }
		 } 
	.image-check-view{
			  position: fixed;
			  top: 0;
			  left: 0;
			  right: 0;
			  bottom: 0;
			  z-index: 2;
			  background-color: rgba(1, 1, 1, 1);
			  .tn-icon-close{
				  position: absolute;
				  top: 10px;
				  right: 10px;
				  font-size: 36rpx;
				  z-index: 888;
			  }
	}
	.botm-view{
		width: 100%;
		padding: 20rpx;
		padding-bottom: 50rpx;
		text-align: center;
	}
	.bottom-btn{
		width: 100% !important;
		
	}
</style>